<template>
  <div>
    <el-dialog custom-class="dialog-app"
      :visible.sync="visible"
      :title="title"
      width="380px"
      :before-close="resetDialog">
      <div v-loading="loading">
        <div style="backgroundColor:#FFF7E6;padding:8px;display:flex;border-radius:4px;">
          <div class="cuifont icon_info_circle_fill" style="color:#fc9750"></div>
          <div style="margin-left:8px;line-height:20px">A new version of the application has been released, and you can choose whether to update it according to the version description.</div>
        </div>
        <!-- <div style="display:flex;margin-top:24px">
          <div style="width:64px;height:64px;padding:5px;box-shadow: 0px 0px 1px 1px #F0F0F0;border-radius:4px">
            <img v-if="appInfo.picture" style="width:54px;height:54px"  :src="appInfo.picture" alt="">
          </div>
          <div style="width:260px;margin-left:21px">
            <div style="font-size:18px;color:#404040">{{appInfo.name}}</div>
            <div style="font-size:12px;color:#7F7F7F;margin:10px 0 10px">By {{appInfo.tenantName}}</div>
            <el-tooltip class="item" effect="dark" :content="appInfo.description" placement="top">
              <span class="more" style="font-size:12px;color:#7F7F7F;line-height:20px">{{appInfo.description}}</span>
            </el-tooltip>
          </div>
        </div> -->
        <div style="height:36px;line-height:36px;font-size: 14px;color: #808080;border-top:1px solid #f0f0f0;margin-top:10px">
          <div style="padding:0 8px">
            <span style="float:left">{{appInfo.appVersion}}</span>
            <span style="float:right">{{formatDate( appInfo.updateTime)}}</span>
          </div>
        </div>
        <div style="line-height:20px;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;margin-bottom:8px">
          <div style="padding:8px;padding-top:0">
            <div style="height:38px;line-height:38px;font-size: 14px;color: #808080;">Description</div>
            <el-tooltip :open-delay="1000" class="item" effect="dark" :disabled="!appInfo.upgradeDesc||appInfo.upgradeDesc&&appInfo.upgradeDesc.length<53" :content="appInfo.upgradeDesc" placement="top">
              <span class="text_more" style="font-size: 14px;color: #404040;line-height: 20px;">{{appInfo.upgradeDesc}}</span>
            </el-tooltip>
          </div>
        </div>
        <div style="height:28px">
          <el-button @click="confirm(appInfo)" style="float:right" size="mini" type="primary">Confirm</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GlobalTimeformat } from '@/utils/common'
export default {
  props: {
    title: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      visible: false,
      appInfo: {},
      loading: false
    }
  },
  methods: {
    formatDate (time, str) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    confirm (item) {
      const params = {
        'appId': item.appId,
        'tenantList': null,
        'all': false,
        'force': true
      }
      this.loading = true
      this.$interface.reports.postUpdateAllApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.visible = false
        this.$emit('getMyAppsList')
        return this.$message.success(res.msg)
      })
    },
    resetDialog () {
      Object.assign(this.$data, this.$options.data())
    },
    init (appId) {
      var params = {
        id: appId
      }
      this.loading = true
      this.$interface.reports.getAppInfoApi(params)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.appInfo = res.data
        }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.cursor_pointer {
  cursor: pointer;
}
.more {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 .text_more {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgc_hover:hover {
  background-color: $--theme-color-background;
  color: $--theme-color;
}
.color_hover:hover {
  color: $--theme-color!important;
}
::v-deep .el-dialog__header {
  padding: 16px;
  padding-bottom: 0;
}
::v-deep .el-dialog__body {
  padding: 16px;
}

</style>
